.content {
  width: 100vw;
  height: 100vh;
  overflow-x: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  .contentPage {
    position: relative;
    margin-left: 19vw;
    flex-grow: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    .topTab {
      align-self: center;
      //width: 400px;
      height: 40px;
      background-color: #fff;
      border-radius: 20px;
      box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.1);
    }
    .title {
      align-self: center;
      width: 100%;
      text-align: center;
      padding: 5px 20px;
      border-bottom: 1px #2F7FDB solid;
      margin-bottom: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      gap:10px;
      font-size: 14px;
      .name {
        max-width: 400px;
        white-space: nowrap;
        overflow: hidden;
        font-weight: 400;
        text-overflow: ellipsis;
        color: #000;
      }
      .logo {
        transform: rotate(90deg);
        position: relative;
        .editModal {
          position: absolute;
          top: -30px;
          left: -20px;
          background-color: #fff;
          box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.15);
          font-size: 14px;
          padding: 10px 30px;
          border-radius: 5px;
          cursor: pointer;
          white-space: nowrap;
          transform: rotate(-90deg);
        }
      }

    }
    .messageContent {
      align-self: center;
      flex: 1;
      width: 100%;
      padding: 10px 30px 30px 10px;
      display: flex;
      flex-direction: column;
      font-size: 14px;
      gap: 20px;
      overflow-y: auto;
      &::-webkit-scrollbar {
        display: none;
      }
      .loadingContainer {
        //display: none;
        .logo {
          width: 40px;
          height: 40px;
          //border: 2px #fff solid;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 20px;
          float: left;
          margin-right: 20px;
          img {
            width: 40px;
          }
        }
        .loading {
          width: 60px;
          height: 40px;
          border-radius: 5px;
          box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.15);
          border: 1px #fff solid;
          padding: 5px 10px 0 10px;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: white;
        }
      }
      .user {
        align-self: flex-end;
        width: 100%;
        color: #333;
        display: flex;
        flex-direction: column;
        .item {
          width: 100%;
          min-height: 40px;
          display: flex;
          align-items: flex-start;
          justify-content: flex-end;
          gap: 20px;
          .response {
            min-width: 150px;
            background-color: #1067ee;
            color: #fff;
            box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.15);
            white-space: pre-wrap;
          }
        }
        .fileContent {
          align-self: flex-end;
          display: grid;
          grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
          grid-gap: 5px 15px;
          grid-auto-rows: 32px;
          margin-right: 60px;
          margin-top: 10px;
          .fileItem {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background-color: #f1f2fa;
            border-radius: 5px;
            padding: 0 10px;
            position: relative;
            .closeFile {
              position: absolute;
              width: 13px;
              height: 13px;
              top: -6.5px;
              right: -6.5px;
              color: #fff;
              background-color: #c2c5dd;
              cursor: pointer;
              border-radius: 6.5px;
              padding: 0;
              margin: 0;
            }
            .closeFile:hover {
              color: #1067ee;
            }
            .fileName {
              flex-grow: 1;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              line-height: 32px;
              img {
                width: 20px;
                height: 20px;
                margin-right: 5px;
                image-rendering: crisp-edges;
              }
            }
            .fileSize {
              border-left: 1px #c7c9da solid;
              padding-left: 10px;
            }
          }
        }
        .createTime {
          align-self: flex-end;
          margin-right: 60px;
          font-size: 14px;
          color: #2F7FDB;
          margin-top: 10px;
        }
      }
      .logo {
        width: 40px;
        height: 40px;
        //border: 2px #fff solid;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 20px;
        img {
          width: 30px!important;
          height: 30px;
        }
      }
      .messageItem {
        flex: 1;
        height: 100%;
        min-height: 40px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        .response {
          border: 1px #fff solid;
          background-color: #fdfdfe;
          color: #05073b;
          height: 100%;
          padding: 10px 10px;
          display: flex;
          flex-direction: column;
          white-space: pre-wrap;
          border-radius: 5px;
        }
      }
      .robot {
        align-self: flex-start;
        width: 100%;
        color: #333;
        display: flex;
        flex-direction: column;
        .item {
          width: 100%;
          min-height: 40px;
          display: flex;
          align-items: flex-start;
          justify-content: flex-end;
          gap: 20px;
          .messageItem {
            justify-content: flex-start;
            gap: 10px;
            width: 100%;
            .response {
              min-width: 300px;
             width: 45vw;
              box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.15);
            }
          }
        }
        .createTime {
          margin-left: 60px;
          font-size: 14px;
          color: #1067ee;
          margin-top: 10px;
          margin-bottom: 10px;
        }
        .questionList {
          align-self: flex-start;
          margin-left: 60px;
          display: flex;
          flex-wrap: wrap;
          gap: 10px;
          .questionItem {
            border: 1px #2F7FDB solid;
            border-radius: 5px;
            padding: 5px 10px;
            white-space: nowrap;
            cursor: pointer;
            color: #2F7FDB;
            background-color: #fff;
          }
          .questionItem:hover {
            text-decoration: underline;
          }
          :global {
            .ant-select:not(.ant-select-customize-input) .ant-select-selector  {
              border: 1px solid rgba(8,155,171,.7);
              border-radius: 15px;
              color: #018ac0;
              background: #ceebee;
            }
          }
        }
        img {
          width: 40px;
        }
      }
    }
    .arrowFa {
      width: 100%;
      text-align: right;
      display: flex;
      justify-content: flex-end;
      .arrowsBottom {
        cursor: pointer;
        width: 30px;
        height: 30px;
        box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.2);
        border-radius: 15px;
        color: #1067ee;
        text-align: center;
        line-height: 30px;
        transform: rotate(90deg);
      }
    }

    .query{
      width: 100%;
       height: auto;
      .sandMessage {
        position: relative;
        width: 100%;
        height: 12.5vh;
        max-height: 150px;
        min-height: 90px;
        background-color: #fff;
        border-radius: 5px;
        display: flex;
        flex-direction: column;
        padding-left: 10px;
        padding-right: 10px;
        margin-left: auto;
        margin-right: auto;
        padding-top: 0;
        .funList {
          border-bottom: 1px #c4c4c4 solid;
          padding: 0px 10px;
          font-size: 14px;
          .fileMenu {
            display: flex;
            align-items: center;
            gap: 5px;
            cursor: pointer;
          }
          .fileMenu:hover {
            color: #1067ee;
          }
        }
        .topContent {
          flex-grow: 1;
          overflow: hidden;
          overflow-y: auto;
          padding: 7px 10px 0 10px;
          .fileContent {
            display: grid;
            grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
            grid-gap: 5px 15px;
            grid-auto-rows: 28px;
            .fileItem {
              display: flex;
              align-items: center;
              justify-content: space-between;
              background-color: #f1f2fa;
              border-radius: 3px;
              padding: 0 10px;
              position: relative;
              .closeFile {
                position: absolute;
                width: 13px;
                height: 13px;
                top: -6.5px;
                right: -6.5px;
                color: #fff;
                background-color: #c2c5dd;
                cursor: pointer;
                border-radius: 6.5px;
                padding: 0;
                margin: 0;
              }
              .closeFile:hover {
                color: #1067ee;
              }
              .fileName {
                flex-grow: 1;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                line-height: 32px;
                img {
                  width: 20px;
                  height: 20px;
                  margin-right: 5px;
                }
              }
              .fileSize {
                 border-left: 1px #c7c9da solid;
                padding-left: 10px;
              }
            }
          }

          .myTextArea {
            border: none;
          }
          .myTextArea:focus {
            box-shadow: none;
            border: none;
            outline: 0;
          }
          input::-webkit-input-placeholder {
            color: #c4c4c4;
            font-size: 14px;
          }
        }
        .topContent::-webkit-scrollbar {
          width: 5px;
        }
        .topContent::-webkit-scrollbar-thumb {
          border-radius: 10px;
          background-color: #c8c8c8;
        }
        .sandMessageImg {
          margin-bottom: 5px;
          width: 28px;
          height: 28px;
          align-self: flex-end;
          img {
            width: 28px;
            height: 28px;
            cursor: pointer;
          }
        }
      }
      //.sandMessage:focus-within {
      //  border: 1px  #f3f5fb solid;
      //}
    }
  }
  .profile {
    width: 19vw;
    min-width: 300px;
    height: calc(100vh - 120px);
    margin-top: 60px;
    margin-left: 20px;
    margin-right: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    .profileContent {
      font-family: DM Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
      width: 100%;
      flex: 1;
      overflow: hidden;
      border-radius: 15px;
      padding: 15px 20px;
      box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.1);
      display: flex;
      flex-direction: column;
      gap: 10px;
      color: #333;
      .profileArticle {
        width: 100%;
        .articleTitle {
          font-size: 15px;
          font-weight: 600;
          span {
            color: #1067ee;
            text-decoration: underline;
            padding-left: 5px;
            cursor: pointer;
          }
        }
        .articleContent {
          text-indent: 2em;
          word-break: break-all;
          margin: 10px 0;
          border-radius: 5px;
          background-color: rgba(193, 193, 193,0.15);
          padding: 5px;
        }
        .fileItemGpt {
          display: flex;
          align-items: center;
          background-color: rgba(193, 193, 193,0.15);
          border-radius: 5px;
          gap: 15px;
          padding: 10px;
          margin-bottom: 15px;
          .fileLeft {
              width: 50px;
              height: 50px;
          }
          .fileRight {
               flex: 1;
               overflow: hidden;
              .fileNameGpt {
                width: 100%;
                font-size: 14px;
                font-weight: 700;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }
            .fileSizeGpt {
                  color: #5e6772;
                  font-size: 12px;
            }
          }
        }
      }
    }
  }
  .line {
    position: relative;
    margin-top: -60px;
    //top: 10px;
    width: 90%;
    left: 13%;
  }
  .contentData {
    margin-top: 40px;
    width: 55%;
    position: relative;
    //display: flex;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    .date {
      font-family: 'PingFangSC-Medium', 'PingFang SC Medium', 'PingFang SC', sans-serif;
      font-weight: 500;
      font-style: normal;
      font-size: 24px;
      color: #4E5969;
      line-height: 22px;
    }
    .reCommendation {
      position: relative;
      width: 100%;
      display: flex;
      align-items: center;
      //justify-content: space-between;
      margin-left: auto;
      margin-right: auto;
      margin-top: 12px;
      text-align: center;
      height: 54px;
      background-color: rgba(255, 255, 255, 1);
      border: none;
      border-radius: 8px;
      box-shadow: 5px 5px 20px rgba(168, 168, 168, 0.349019607843137);
      .reCommendation_icon {
        width: 44px;
        height: 28px;
        padding-left: 15px;
      }
      .reCommendation_title {
        padding-left: 15px;
        text-align: left;
        width: 100%;
      }
      .time {
        width: 18%;
        padding-right: 15px;
        text-align: right;
      }
    }
  }
  .hot {
    position: relative;
    width: 60%;
    display: flex;
    align-items: center;
    //justify-content: space-between;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
    .tips {
      padding-left: 10px;
      font-family: 'PingFangSC-Medium', 'PingFang SC Medium', 'PingFang SC', sans-serif;
      font-weight: 500;
      font-style: normal;
      font-size: 14px;
    }
  }
}

.robot {
  align-self: flex-start;
  width: 100%;
  color: #333;
  display: flex;
  flex-direction: column;

  .item {
    width: 100%;
    min-height: 40px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 20px;

    .messageItem {
      justify-content: flex-start;
      gap: 10px;

      .topSearch {
        border-radius: 4px;
        background-color: #fff;
        color: #000;
        height: 100%;
        padding: 0px 10px 10px 10px;
        box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.15);
        .titleHello {
          display: inline-block;
          font-size: 23px;
          line-height: 23px;
          color: #fff;
          background: var(--primary-color);
          padding: 10px 15px;
          border-bottom-left-radius: 12px;
          border-bottom-right-radius: 12px;
          letter-spacing: 1px;
          box-shadow: 0px 3px 10px -2px var(--primary-color);
        }

        .titleInfo {
          font-size: 14px;
          line-height: 25px;
          letter-spacing: 1px;
          margin-top: 10px;
        }

        .titleQuestion {
          margin-top: 15px;
          font-size: 14px;
          font-weight: 400;
          display: flex;
          gap: 20px;
          margin-bottom: 10px;

          .titleQuestionImg {
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;

            img {
              width: 1.2em;
              height: 1.2em;
            }
          }

          .titleQuestionItem {
            display: flex;
            gap: 10px;
            cursor: pointer;
            padding: 10px 0 5px;
            border-bottom: 1.5px var(--primary-color) dashed;
            color: var(--primary-color);

            .titleQuestionImg img {
              transform: translateX(-100vw);
              filter: drop-shadow(var(--primary-color) 100vw 0);
            }
          }

          .titleQuestionItemNo {
            display: flex;
            gap: 10px;
            cursor: pointer;
            padding: 10px 0 5px;
            color: #999999;
            border-bottom: 1.5px transparent dashed;

            .titleQuestionImg {
              filter: brightness(1.5);
            }
          }
        }

        .searchQuestion {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          gap: 10px;

          .hotQuestion {
            flex-basis: calc(50% - 5px);
            cursor: pointer;
            flex-shrink: 1;
            display: flex;
            align-items: center;
            gap: 4px;
            color: var(--primary-color);
            padding: 10px;
            background: linear-gradient(45deg, #f4f5f7, transparent);

            img {
              width: 1em;
              height: 1em;
              transform: translateX(-100vw);
              filter: drop-shadow(var(--primary-color) 100vw 0);
            }
          }

          .hotQuestion:hover {
            background: url('../../assets/images/bonceChatGpt/checkedTop.svg');
            background-size: cover;
            background-repeat: no-repeat;
            background-position: right;
          }
        }
      }

      .responseContent {
        padding: 0 10px 0 0 ;
        color: #000;
        position: relative;
        overflow: hidden;
        //display: flex;
        //flex-wrap: wrap;
        //flex-direction: row;
        a{
          display: inline ;
          color: red;
        }
        a:hover {
          text-decoration: underline;
        }
      }

      .messageItemOp {
        display: flex;
        justify-content: space-between;
        padding: 3px 10px 3px 0px;
        line-height: 15px;
        color: var(--primary-color);
        gap: 10px;

        .createTime {
          line-height: 15px;
          color: #969696;
          font-size: 14px;
        }

        .operate {
          display: flex;
          align-self: flex-end;
          align-items: center;
          gap: 10px;

          img {
            cursor: pointer;
          }

          .anew {
            display: flex;
            align-items: center;
            gap: 3px;
          }

          .anew:hover {
            transform: scale(1.1);
          }

          .anew:active {
            transform: scale(0.95);
          }

          .anewImg {
            width: 1.2em;
            height: 1.2em;
            transform: translateX(-100vw);
            filter: drop-shadow(var(--primary-color) 100vw 0);
          }

          .zan {
            cursor: pointer;

            img {
              width: 1.2em;
              height: 1.2em;
              transform: translateX(-100vw);
              filter: drop-shadow(var(--primary-color) 100vw 0);
            }
          }

          .zan:hover {
            transform: scale(1.1);
          }

          .zan:active {
            transform: scale(0.95);
          }
        }
      }
    }
  }
  .questionListAll {
    padding-right: 10px;

    .questionListOne {
      display: flex;
      align-items: center;
      gap: 10px;
      font-weight: 400;
      font-style: normal;
      color: var(--primary-color);
      padding-bottom: 5px;
    }

    .questionListMore {
      font-weight: 400;
      font-style: normal;
      color: var(--primary-color);
      margin-bottom: 5px;
      border-top: 1px dashed;
      padding-top: 5px;
    }
    .questionList {
      align-self: flex-start;
      //margin-left: 60px;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
    .questionItem {
      //border:1px  rgba(153, 153, 153, 1) solid;
      border: 1px var(--primary-color) solid;
      border-radius: 15px;
      padding: 2px 10px;
      white-space: nowrap;
      cursor: pointer;
      //color: #4c74f2;
      //color: #018ac0;
      color: var(--primary-color);
    }

    .questionItem:hover {
      text-decoration: underline;
    }
  }
}
.chat{
  width:86%;
  padding:30px;
  margin:0 auto;
  //border:1px red solid;
}

.rightIconUser {
  position: absolute;
  right: 40px;
  top: 20px;
  cursor: pointer;
  .feedBack{
    width: 40px;
    height: 40px;
    padding: 5px;
    border-radius: 5px;
  }
  .feedBack:hover {
    background-color: #e5e7ed;
  }
}
.editTitle{
  width: 300px;
  position: absolute;
  top:40px;
}
.getDataBtn {
  margin-top: 10px;
  text-align: right;
  color: #1067ee;
  span {
    cursor: pointer;
  }
  span:hover {
    text-decoration: underline;
  }
}

:global(.profileContent),
:global(.ant-tabs) {
  flex: 1;
  overflow: hidden;
}
:global(.profileContent),
:global(.ant-tabs-tab) {
  font-size: 16px;
  color: #333;
}
:global(.profileContent),
:global(.ant-tabs),
:global(.ant-tabs-content-holder) {
  overflow-y: auto;
  &::-webkit-scrollbar {
  display: none;
}
}
